<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="blog/layout" th:with="title='图片压缩 |',active='about'">
<header th:replace="blog/layout::headerFragment(${title},${active})"></header>
<link th:href="@{//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
<body>
<div layout:fragment="content">
    <div class="content-wrap">
        <div id="content" class="content">
            <div id="posts" class="posts-expand">
                <div class="post-block page" style="opacity: 1; display: block;">
                    <header class="post-header" style="opacity: 1; display: block; transform: translateY(0px);">
                        <h1 class="post-title" itemprop="name headline">CodeWwang</h1>
                    </header>
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-12">
                                <form id="form" method="POST" enctype="multipart/form-data" role="form"
                                      action="/space/img_upload_compress" onsubmit="return check();">
                                    <div class="form-group">
                                        <label for="file" class="label-primary"> 图片</label>
                                        <input type="file" class="form-control" accept="image/*" name="file" id="file"/><br>
                                    </div>

                                    <div class="form-group">
                                        <label for="scale" class="label-primary"> 压缩比</label>
                                        <input name="scale" id="scale" type="text"/>
                                        <p class="help-block label-pink">(0.0 ~ 1.0 之间)压缩比越低，图片压缩越明显，根据需要输入合适压缩比，输入过低的压缩比会导致图片严重模糊，容量锐减！</p>
                                    </div>

                                    <input type="submit" class="btn btn-default" value="提交并下载"/>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{//cdn.bootcss.com/jquery/2.2.3/jquery.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script>
    var fileDom = document.getElementById("file");
    var previewDom = document.getElementById("preview");
    fileDom.addEventListener("change", e => {
        var file = fileDom.files[0];
        if (!file || file.type.indexOf("image/") < 0) {
            fileDom.value = "";
            previewDom.src = "";
            return;
        }
        var fileReader = new FileReader();
        fileReader.onload = e => {
            previewDom.src = e.target.result;
        };
        fileReader.readAsDataURL(file);
    });

    var formDom = document.getElementById("form");

    function check() {
        var file = fileDom.files[0];
        if (!file || file.type.indexOf("image/") < 0) {
            return false;
        }
        return true;
    }
</script>
</body>
</html>

